<template>
    <div class="container role-noBg">
        <a-table
            :columns="columns"
            :data-source="dataSource"
            row-key="id"
            :pagination="pagination"
            :loading="loading"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :scroll="{ x: 420, y: 500 }"
            class="dict-data__table-table"
            @change="handleTableChange"
            :customRow="handleCustomRow"
            :rowClassName="setRowClassName"
        >
            <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                <span>{{ t(`yl.${item.slotName}`) }}</span>
            </template>

            <template #customAction="{ record }">
                <a-button class="action-btn action-btn__edit" @click="handleEditDict(record)" type="primary" size="small">
                    <template #icon>
                        <EditOutlined />
                    </template>
                </a-button>
                <a-popconfirm placement="topRight" @confirm="handleDelete(record.id)">
                    <template #title>
                        <p>{{ t('yl.deleteConfirmtext') }}</p>
                    </template>
                    <a-button class="action-btn action-btn__delete" type="danger" size="small">
                        <template #icon>
                            <Delete />
                        </template>
                    </a-button>
                </a-popconfirm>
            </template>
        </a-table>
        <yl-dict-model
            :visible="visible"
            :loading="confirmLoading"
            :title="title"
            :dict="selectedRow"
            @cancle="handleCancle"
            @submit="handleSubmit"
        ></yl-dict-model>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { message } from 'ant-design-vue';
import { addDict, editDict } from '@/api/system';

import ylDictModel from './dictModel.vue';

import columns from './listColumns';
import useTables from './listTables';
import useDelete from './useDelete';
import { handleInitTable } from './initListTable';

export default defineComponent({
    components: {
        ylDictModel,
    },
    setup(props, { emit }) {
        const { t } = useI18n();
        const { tableQuery, getTableData, selectedRow, visible, selectedRowKeys } = useTables;
        const state = reactive({
            title: computed(() => (selectedRow.value.id ? t('yl.editDict') : t('yl.addDict'))),
            confirmLoading: false, // 弹窗按钮的loading
            checkedDict: {},
            index: null as null | number,
        });
        onMounted(() => {
            getTableData(tableQuery);
        });

        // 新增 、编辑字典
        const handleSubmit = (dict: NormalObj) => {
            state.confirmLoading = true;
            const msg = dict.id ? t('yl.editSuccess') : t('yl.addSuccess');
            const realRequest = dict.id ? editDict(dict) : addDict(dict);
            realRequest
                .then(() => {
                    state.confirmLoading = false;
                    message.success(msg);
                    visible.value = false;
                    const timer = setTimeout(() => {
                        handleInitTable(tableQuery);
                        clearTimeout(timer);
                    }, 500);
                })
                .catch(() => {
                    state.confirmLoading = false;
                });
        };
        // 设置行属性... 点击 鼠标滑过等
        const handleCustomRow = (record: NormalObj, index: number) => {
            return {
                onClick: () => {
                    const { id } = record;
                    // selectedRowKeys.value = [id];
                    // state.checkedDict = record;
                    state.index = index;
                    emit('handleCustomRow', Object.assign({}, record));
                },
            };
        };
        const setRowClassName = (record: NormalObj, index: number) => {
            return index === state.index ? 'clickRowStyl' : '';
        };

        return {
            columns,
            ...useTables,
            t,
            ...useDelete(),
            ...toRefs(state),
            handleSubmit,
            handleCustomRow,
            setRowClassName,
        };
    },
});
</script>

<style lang="scss" scoped>
.container {
    .action-btn + .action-btn {
        margin-left: $width8;
    }
}
</style>
<style>
.clickRowStyl {
    background: #e6f7ff;
}
.role-noBg .ant-table-tbody > tr.ant-table-row-selected td {
    background: none;
}
</style>
